import {View, Text, ScrollView,} from "@tarojs/components";
import React, {useCallback, useEffect, useRef, useState} from "react";
import {Button, Cell, CellGroup} from "@antmjs/vantui";
import AssetImage from "@/common/AssetImage";
import Utils from "@/utils/common";
import BottomButton from "@/components/bottom_button";
import {teamDeleteApi, teamInfoApi, teamRelationInfoApi} from "@/common/apis/home_datasource";
import Taro from "@tarojs/taro";
import {InvoiceParams, RelationModel, TeamModel} from "@/common/apis/model";
import ShowUtils from "@/utils/show_utils";
import RouthPath from "@/common/RouthPath";
import EventUtils from "@/utils/event_utils";

definePageConfig({
  navigationBarTitleText: '课题组详情'
})

export default function ResearchTeamDetail() {
  const eventChannel = useRef<Taro.EventChannel | null>();
  const [relationInfo, setRelationInfo] = useState<RelationModel>();
  const [teamModel, setTeamModel] = useState<TeamModel>()
  const getData = useCallback((id) => {
    teamRelationInfoApi(id).then((res) => {
      if (res) {
        setRelationInfo(res)
      }
    })
    teamInfoApi(id).then((res) => {
      if (res) {
        setTeamModel(res)
      }
    })
  }, []);
  useEffect(() => {
    const instance = Utils.getI();
    eventChannel.current = Utils.getChannel(instance)
    const params = Utils.getParamsByRouter(instance)
    if (params && params.data) {
      const tM = Utils.getObjectWithUrl<TeamModel>(params.data);
      getData(tM.id)
    }
  }, [getData]);


  const goRecharge = useCallback(() => {
    if (!teamModel) {
      return
    }
    const params: InvoiceParams = {
      type: 1,
      teamId: teamModel.id,
      name: teamModel.name,
    }
    const url = Utils.getUrlWithObject(RouthPath.applyRecharge, params)
    Utils.navigateAndListenToEvent(url, EventUtils.ApplyRecharge, (data) => {
      if (data && teamModel) {
        getData(teamModel.id)
      }
    })
  }, [getData, teamModel]);

  return (
    <View style={{backgroundColor: AssetImage.bg, display: 'flex', flexDirection: 'column', height: '100VH'}}>
      <ScrollView scrollY style={{boxSizing: 'border-box', flex: '1', position: 'relative', overflow: 'hidden'}}>
        <CellGroup title='课题组详情'>
          {
            teamModel ? <View> <Cell title='课题组名称'>
              <Text>{teamModel.name}</Text>
            </Cell>
              <Cell title='课题组简介' label={ShowUtils.getDefault(teamModel.note, "无")}></Cell>
              <Cell title='课题组成员列表' isLink onClick={() => {
                if (relationInfo) {
                  Utils.navigateTo({
                    url: Utils.getUrlWithObject(RouthPath.researchTeamMember, relationInfo),
                  })
                } else {
                  Utils.showErrorToast("没有查看权限")
                }
              }}
              ></Cell>
              <Cell title='课题组项目列表' isLink onClick={() => {
                ///项目列表
                Utils.navigateTo({
                  url: Utils.getUrlWithObject(RouthPath.researchTeamProject, relationInfo)
                })
              }}
              ></Cell>
            </View> : <View />
          }
        </CellGroup>
        <CellGroup title='额度详情'>
          {
            teamModel && relationInfo ? <View>
              <Cell renderIcon='课题组经费'>
                <View
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'flex-end'
                  }}
                >
                  <Text
                    style={{
                      color: 'red',
                      fontSize: '16px',
                      marginRight: '10px'
                    }}
                  >{ShowUtils.getDefaultPrice(teamModel.balance)}</Text><View><Button size='normal' type='info'
                    onClick={(e) => {
                                                                                        goRecharge()
                                                                                      }}
                  >充值</Button></View></View>
              </Cell>
              <Cell renderIcon='课题组限额'>
                <Text style={{fontSize: '16px'}}>{ShowUtils.getDefaultPrice(relationInfo.debtLimit)}</Text>
              </Cell>
              <Cell renderIcon='已使用额度'>
                <Text
                  style={{color: 'red', fontSize: '16px'}}
                >{ShowUtils.getDefaultPrice(relationInfo.debtLimitUse)}</Text>
              </Cell>
            </View> : null
          }
        </CellGroup>
      </ScrollView>
      {
        relationInfo && relationInfo.isCreator === 1 ?
          <BottomButton submitText='解散课题组' onSubmit={() => {
            if (teamModel) {
              Utils.modal('解散课题组', `课题组解散后无法恢复，是否解散`, true, (ok) => {
                if (ok) {
                  teamDeleteApi(teamModel.id).then((res) => {
                    if (res) {
                      if (eventChannel.current) {
                        Utils.emit(eventChannel.current, 'teamDelete', true)
                      }
                      Utils.navigateBack()
                    }
                  })
                }
              })
            }
          }}
          /> : null
      }
    </View>

  )
}
